<template>
	<div class="calendar">
		<div class="title">
			<div class="checks">
				<image src="../static/mark/m1.png" @click="onCheckDate('reduction', 'month')" class="check-item"></image>
				<image src="../static/mark/d1.png" @click="onCheckDate('reduction', 'day')" class="check-item"></image>
				<span class="check-item-date" @click="show = true">{{ getYearMonth }}</span>
				<image src="../static/mark/d2.png" @click="onCheckDate('add', 'day')" class="check-item"></image>
				<image src="../static/mark/m2.png" @click="onCheckDate('add', 'month')" class="check-item"></image>
			</div>
			<u-datetime-picker closeOnClickOverlay :show="show" v-model="pickerDate" mode="date" @confirm="confirmPicker" @cancel="this.show = false" @close="this.show = false" ></u-datetime-picker>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		outDate: {
			type: [String, Date],
			default: new Date()
		}
	},
	data() {
		return {
			nowDate: this.outDate,
			calendarHeader: ['日', '一', '二', '三', '四', '五', '六'],
			show: false,
			pickerDate: Number(new Date())
		};
	},
	computed: {
		// 当前日期换为年月
		getYearMonth() {
			const date = new Date(this.nowDate);
			let year = date.getFullYear();
			let month = date.getMonth();
			month = month + 1;
			month < 10 ? (month = '0' + month) : month;
			let day = date.getDate();
			day < 10 ? (day = '0' + day) : day;
			let week = date.getDay();
			return `${year}年${month}月${day}日 周${this.calendarHeader[week]}`;
		}
	},
	methods: {
		//确认picker
		confirmPicker(e) {
			this.show = false;
			this.nowDate = new Date(e.value);
			this.$emit('selectDay', this.nowDate);
		},
		// 切换年月事件
		onCheckDate(mode, category) {
			const { year, month, day } = this.getYearMonthDay(new Date(this.nowDate));
			if (mode == 'add') {
				if (category == 'year') {
					this.nowDate = new Date(year + 1, month, day);
				} else if (category == 'month') {
					this.nowDate = new Date(year, month + 1, day);
				} else {
					this.nowDate = new Date(year, month, day + 1);
				}
			} else {
				if (category == 'year') {
					this.nowDate = new Date(year - 1, month, day);
				} else if (category == 'month') {
					this.nowDate = new Date(year, month - 1, day);
				} else {
					this.nowDate = new Date(year, month, day - 1);
				}
			}
			this.$emit('selectDay', this.nowDate);
		},

		// 获取年月日
		getYearMonthDay(date) {
			const year = date.getFullYear();
			const month = date.getMonth();
			const day = date.getDate();
			return { year, month, day };
		}
	}
};
</script>

<style lang="scss" scoped>
.calendar {
	width: 100%;
	height: 100%;
	min-width: 280px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	// 头部
	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 5px;
		.checks {
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;
			.check-item-date {
				margin: 0 5rpx;
			}
			.check-item {
				margin: 0 5px;
				cursor: pointer;
				user-select: none;
				display: inline-block;
				width: 40rpx;
				height: 40rpx;
				&:hover {
					color: #000000;
				}
			}
		}
	}
}
</style>
